<script lang="ts" setup>
import OnlyOfficeDemo from "../../../components/OnlyOfficeDemo.vue";
import WordContentControll from "../../../components/word/ContentControll.vue";
import ViewModeEdit from "../../../components/word/ViewModeEdit.vue";
import BoolMarkFill from "../../../components/word/BookMarkFill.vue";
import FormFill from "../../../components/word/FormFill.vue";
import BookmarkHighLight from "../../../components/word/BookmarkHighLight.vue";
import InnerClickComment from "../../../components/word/InnerClickComment.vue";
import ClickIsText from "../../../components/word/ClickIsText.vue";
import SetText from "../../../components/word/SetText.vue";
import GetOnlineUser from "../../../components/word/GetOnlineUser.vue";
import ForceSave2 from "../../../components/word/ForceSave2.vue";
import CleanDocToPure from "../../../components/word/CleanDocToPure.vue";
import FixRangePos from "../../../components/word/FixRangePos.vue";
import BookmarkFormDemo from "../../../components/word/BookmarkFormDemo.vue";
import ClickHyperlinkDemo from "../../../components/word/ClickHyperlinkDemo.vue";
import ClickBookmarkDemo from "../../../components/word/ClickBookmarkDemo.vue";
import GetDocumentCountInfo from "../../../components/word/GetDocumentCountInfo.vue";
import Ws2Http from "../../../components/word/Ws2Http.vue";

import ExcelOnlyOfficeDemo from "../../../components/excel/ExcelOnlyOfficeDemo.vue";
import DataVailListWorksheetChange from "../../../components/excel/DataVailListWorksheetChange.vue";

import PptOnlyOfficeDemo from "../../../components/ppt/PptOnlyOfficeDemo.vue";

import Frame from "../../../components/Frame.vue";

import { ElRow, ElCol } from "element-plus";
import { ref, onMounted, onUnmounted } from "vue";

const getUuid = function () {
  return "xxxxxxxxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

var menuList = [
  {
    title: "word",
    sub_title: "word-扩展API",
    children: [
      {
        title: "在线word样例",
        children: [
          {
            title: "基础DEMO",
            script_file: "/demo_script/wordDemo.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
        ],
      },
      {
        title: "官方API",
        children: [
          {
            title: "官方API",
            script_file: "/demo_script/officalApi.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
        ],
      },
      {
        title: "表单双向",
        children: [
          {
            title: "书签模式",
            script_file: "/demo_script/fillFormBookmark.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: BoolMarkFill,
          },
          {
            title: "内容控件模式",
            script_file: "/demo_script/fillForm.js",
            demo_url: "http://47.94.91.67/demo_file/DemoRich.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: WordContentControll,
          },
          {
            title: "Form模式",
            script_file: "/demo_script/formFill.js",
            demo_url: "http://47.94.91.67/demo_file/blank.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: FormFill,
          },
        ],
      },
      {
        title: "config",
        children: [
          {
            title: "ws切换为http",
            script_file: "/demo_script/word/ws2http.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: Ws2Http,
          },
        ]
      },
      {
        title: "事件",
        children: [
          {
            title: "保存动作完成监听",
            script_file: "/demo_script/word/event_onSaveComplete.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ForceSave2,
          },
          {
            title: "点击段落",
            script_file: "/demo_script/word/onClickParagraph.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "点击批注",
            script_file: "/demo_script/innerClickComment.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: InnerClickComment,
          },
          {
            title: "点击文字",
            script_file: "/demo_script/clickIsText.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ClickIsText,
          },
          
          {
            title: "点击超链接",
            script_file: "/demo_script/word/clickHyperlink.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ClickHyperlinkDemo,
          },
          {
            title: "点击书签",
            script_file: "/demo_script/word/clickBookmark.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ClickBookmarkDemo,
          },{
            title: "书签变动",
            script_file: "/demo_script/bookmarkMaybeChange.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: BookmarkFormDemo,
          },{
            title: "统计文档回调",
            script_file: "/demo_script/word/onGetDocumentCountInfo.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: GetDocumentCountInfo,
          },{
            title: "段落变动",
            script_file: "/demo_script/word/onParagraphChange.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },{
            title: "滚动监听",
            script_file: "/demo_script/word/onScrollAction.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
        ],
      },
      {
        title: "预览模式",
        children: [
          {
            title: "调用API操作文档",
            script_file: "/demo_script/viewModeEdit.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "view",
            view_com: ViewModeEdit,
          },
        ],
      },
      {
        title: "Api",
        children: [
        {
            title: "打印文档",
            script_file: "/demo_script/word/Print.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "修正RangePos官方bug",
            script_file: "/demo_script/word/fixRangePos.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: FixRangePos,
          },
          {
            title: "清洁文档",
            script_file: "/demo_script/word/cleanDocToPure.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: CleanDocToPure,
          },
          {
            title: "书签高亮",
            script_file: "/demo_script/word/BookmarkHighLight.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: BookmarkHighLight,
          },
          {
            title: "书签监听",
            script_file: "/demo_script/word/BookmarkMaybeChange.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: BookmarkHighLight,
          },
          {
            title: "滚动页面",
            script_file: "/demo_script/word/ScrollAction.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "开启/关闭页面变动监听",
            script_file: "/demo_script/word/openParagraphChange.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "密码加/解密",
            script_file: "/demo_script/word/Api/SetPassword2.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
        ],
      },
      {
        title: "ApiBlockLvlSdt",
        children: [
        {
            title: "滚动",
            script_file: "/demo_script/word/ApiBlockLvlSdt_ScrollTo.js",
            demo_url: "http://47.94.91.67/demo_file/DemoRich.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
        ]
      },
      {
        title: "ApiComment",
        children: [
          {
            title: "滚动到批注",
            script_file: "/demo_script/word/commentsDemo.js",
            demo_url: "http://47.94.91.67/demo_file/html/Comment_demo.html",
            config_type: "desktop",
            config_mode: "view",
            view_com: Frame,
          },
          {
            title: "获取所在段落",
            script_file: "/demo_script/word/ApiComment/GetParentParagraph2.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
        ],
      },
      {
        title: "ApiDocument",
        children: [
          {
            title: "光标处插入书签",
            script_file: "/demo_script/word/insertBookmark.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },  
          {
            title: "获取段落信息",
            script_file: "/demo_script/word/GetAllParagraphs2.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },{
            title: "锁定段落",
            script_file: "/demo_script/word/lockParagraph.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "强制保存",
            script_file: "/demo_script/forceSave2.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ForceSave2,
          },
          {
            title: "统计文档信息",
            script_file: "/demo_script/word/getDocumentCountInfo.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: GetDocumentCountInfo,
          },
          {
            title: "选中【跟踪更改】项目",
            script_file: "/demo_script/word/SelectRevisionChange2.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "高亮段落",
            script_file: "/demo_script/word/HighLightParagraphByIndex.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "取消高亮段落",
            script_file: "/demo_script/word/ResetHighLightParagraph.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "选中批注",
            script_file: "/demo_script/word/commentsDemo.js",
            demo_url: "http://47.94.91.67/demo_file/html/Comment_demo.html",
            config_type: "desktop",
            config_mode: "view",
            view_com: Frame,
          },
          {
            title: "显示批注",
            script_file: "/demo_script/word/commentsDemo.js",
            demo_url: "http://47.94.91.67/demo_file/html/Comment_demo.html",
            config_type: "desktop",
            config_mode: "view",
            view_com: Frame,
          },
          {
            title: "获取目录树",
            script_file: "/demo_script/selectTitleItem.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "获取在线用户",
            script_file: "/demo_script/getOnlineUser.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: GetOnlineUser,
          },
        ],
      },
      {
        title: "ApiInlineLvlSdt",
        children: [
        {
            title: "滚动",
            script_file: "/demo_script/word/ApiInlineLvlSdt_ScrollTo.js",
            demo_url: "http://47.94.91.67/demo_file/DemoRich.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
        ]
      },
      {
        title: "ApiRange",
        children: [
          {
            title: "滚动到Range",
            script_file: "/demo_script/scrollTo.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "设置文字",
            script_file: "/demo_script/setText.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: SetText,
          },
          {
            title: "设置书签文字",
            script_file: "/demo_script/fillFormBookmark.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: BoolMarkFill,
          },
        ],
      },{
        title: "ApiTable",
        children: [
          {
            title: "获取ID",
            script_file: "/demo_script/word/ApiTable/GetId.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "获取段落",
            script_file: "/demo_script/word/ApiTable/GetAllParagraphs.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
        ],
      },
      {
        title: "ApiParagraph",
        children: [
          {
            title: "获取ID",
            script_file: "/demo_script/word/ApiParagraph/GetId.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },{
            title: "设置水平对齐",
            script_file: "/demo_script/word/ApiParagraph/SetHorAlign.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
        ],
      },
    ],
  },
  {
    title: "excel",
    sub_title: "excel-扩展API",
    children: [
      {
        title: "在线excel样例",
        children: [
          {
            title: "DEMO",
            script_file: "/demo_script/excel/excelDemo.js",
            demo_url: "http://47.94.91.67/demo_file/demo.xlsx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ExcelOnlyOfficeDemo,
          },
        ],
      },
      {
        title: "官方API",
        children: [
          {
            title: "官方API",
            script_file: "/demo_script/excel/excelOfficalApi.js",
            demo_url: "http://47.94.91.67/demo_file/demo.xlsx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ExcelOnlyOfficeDemo,
          },
        ],
      },
      {
        title: "事件",
        children: [
          {
            title: "数据验证【列表】选中监听",
            script_file: "/demo_script/excel/onWorksheetChange.js",
            demo_url: "http://47.94.91.67/demo_file/data_validation.xlsx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: DataVailListWorksheetChange,
          },
          {
            title: "单元格点击监听",
            script_file: "/demo_script/excel/onCellClick2.js",
            demo_url: "http://47.94.91.67/demo_file/data_validation.xlsx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: DataVailListWorksheetChange,
          },
        ],
      },
      {
        title: "Api",
        children: [
          {
            title: "滚动页面",
            script_file: "/demo_script/excel/ScrollAction.js",
            demo_url: "http://47.94.91.67/demo_file/data_validation.xlsx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: DataVailListWorksheetChange,
          },
        ],
      },
    ],
  },
  {
    title: "ppt",
    sub_title: "ppt-扩展API",
    children: [
      {
        title: "在线ppt样例",
        children: [
          {
            title: "DEMO",
            script_file: "/demo_script/ppt/pptDemo.js",
            demo_url: "http://47.94.91.67/demo_file/demo.pptx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: PptOnlyOfficeDemo,
          },
        ],
      },
      {
        title: "官方API",
        children: [
          {
            title: "官方API",
            script_file: "/demo_script/ppt/pptOfficalApi.js",
            demo_url: "http://47.94.91.67/demo_file/demo.pptx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: PptOnlyOfficeDemo,
          },
        ],
      },
      {
        title: "事件",
        children: [
          {
            title: "双击监听",
            script_file: "/demo_script/ppt/onShapeDoubleClick2.js",
            demo_url: "http://47.94.91.67/demo_file/demo.pptx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: PptOnlyOfficeDemo,
          },
        ],
      },
      {
        title: "ApiImage",
        children: [
          {
            title: "获取ID",
            script_file: "/demo_script/ppt/ApiImage/GetId2.js",
            demo_url: "http://47.94.91.67/demo_file/demo.pptx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: PptOnlyOfficeDemo,
          },
          {
            title: "获取标题",
            script_file: "/demo_script/ppt/ApiImage/GetTitle2.js",
            demo_url: "http://47.94.91.67/demo_file/demo.pptx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: PptOnlyOfficeDemo,
          },
        ],
      },
      {
        title: "ApiParagraph",
        children: [
          {
            title: "获取ID",
            script_file: "/demo_script/ppt/ApiParagraph/GetId2.js",
            demo_url: "http://47.94.91.67/demo_file/demo.pptx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: PptOnlyOfficeDemo,
          },
          
        ],
      },
      {
        title: "ApiTable",
        children: [
          {
            title: "获取ID",
            script_file: "/demo_script/ppt/ApiTable/GetId2.js",
            demo_url: "http://47.94.91.67/demo_file/demo.pptx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: PptOnlyOfficeDemo,
          },
          {
            title: "获取当前Cell",
            script_file: "/demo_script/ppt/ApiTable/GetCurCell.js",
            demo_url: "http://47.94.91.67/demo_file/demo.pptx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: PptOnlyOfficeDemo,
          },
        ],
      },
      
    ],
  },
];
var typeColor = {
  word: "rgb(41, 114, 244)",
  excel: "rgb(49, 155, 98)",
  ppt: "rgb(255, 156, 153)",
};
var currentDemoScriptUrl = ref("");
var currentDemoUrl = ref("");
var currentConfigType = ref("");
var currentConfigMode = ref("");
var currentViewCom = ref("");
var refreshDemo = function (
  scriptFileUrl,
  demoFileUrl,
  configType,
  configMode,
  viewCom
) {
  currentDemoScriptUrl.value = scriptFileUrl;
  currentDemoUrl.value = demoFileUrl;
  currentConfigType.value = configType;
  currentConfigMode.value = configMode;
  currentViewCom.value = viewCom;
};

onMounted(() => {
  refreshDemo(
    menuList[0]?.children[0].children[0]["script_file"],
    menuList[0]?.children[0].children[0]["demo_url"],
    menuList[0]?.children[0].children[0]["config_type"],
    menuList[0]?.children[0].children[0]["config_mode"],
    menuList[0]?.children[0].children[0]["view_com"]
  );
});
</script>

<template>
  <el-row class="mian_container">
    <el-col :span="4" style="height: 100%">
      <aside class="VPSidebar" style="height: 100%">
        <nav class="VPSidebarNav">
          <div v-for="menuItem in menuList">
            <div
              class="type_container"
              :style="{ background: typeColor[menuItem.title] }"
            >
              {{ menuItem.sub_title }}
            </div>
            <div class="group" v-for="groupItem in menuItem.children">
              <section class="VPSidebarGroup">
                <div class="title">
                  <h2 class="title-text">{{ groupItem.title }}</h2>
                </div>
                <span
                  v-for="demoItem in groupItem.children"
                  class="link"
                  :class="{
                    active: currentDemoScriptUrl == demoItem.script_file,
                  }"
                  @click="
                    refreshDemo(
                      demoItem.script_file,
                      demoItem.demo_url,
                      demoItem.config_type,
                      demoItem.config_mode,
                      demoItem.view_com
                    )
                  "
                  ><p class="link-text">{{ demoItem.title }}</p></span
                >
              </section>
            </div>
            <div
              style="height: 20px; width: 100%; background-color: f0f0f0"
            ></div>
          </div>
        </nav>
      </aside>
    </el-col>
    <el-col :span="20" style="height: 100%">
      <!-- <OnlyOfficeDemo
        v-model:script-url="currentDemoScriptUrl"
        v-model:demo-file-url="currentDemoUrl"
        v-model:demo-config-type="currentDemoUrl"
        v-model:demo-config-mode="currentDemoUrl"
        ref="pageRef"
      ></OnlyOfficeDemo> -->
      <component
        :is="currentViewCom"
        v-model:script-url="currentDemoScriptUrl"
        v-model:demo-file-url="currentDemoUrl"
        v-model:demo-config-type="currentConfigType"
        v-model:demo-config-mode="currentConfigMode"
        ref="pageRef"
        style="height: 100%"
      ></component>
    </el-col>
  </el-row>
</template>
<style scoped>
.VPSidebar {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0px 32px 96px;
  height: 80%;
}
.VPSidebarNav {
  padding-top: 24px;
  outline: 0px;
  display: block;
  unicode-bidi: isolate;
}
.VPSidebar .group {
  padding-top: 16px;
}
.group + .group {
}
.VPSidebarGroup {
}
.VPSidebarGroup .title {
}
.VPSidebarGroup .title .title-text {
  line-height: 20px;
  font-size: 15px;
  font-weight: bold;
  color: #213547;
  transition: color 0.5s;
}
.VPSidebarGroup .link .link-text {
  line-height: 25px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(60, 60, 60, 0.7);
  transition: color 0.5s;
}
.link.active .link-text {
  font-weight: 600;
  color: #42b883;
  transition: color 0.25s;
}
.type_container {
  display: block;
  width: 100%;
  line-height: 40px;
  font-size: 20px;
  font-weight: 600;
  transition: color 0.5s;
  color: #ffffff;
  text-align: center;
}
.type_container + .type_container {
  padding-top: 16px;
}
.mian_container {
  height: calc(100vh - 88px);
}
</style>
